<template>
  <div>
    <div class="titletopXX">
    <van-nav-bar
      size="30"
      :title="title"
      left-arrow
      right-text=""
      :fixed="true"
      @click-left="onClickLeft"
    />
    </div>
    <div class="content">
      <div v-if="list.length > 0">
        <div class="item" v-for="item in list" :key="item.id" :class="{ selected: item.select }">
          <div
            @click="onSelect(item)"
            style="display: flex; align-items: center;"
          >
            <div style="width: 15%">
              <van-checkbox
                @click="onSelect(item)"
                v-model="item.select"
                checked-color="#36c2a8"
                shape="square"
              ></van-checkbox>
            </div>
            <div style="width: 85%">
              <div>
                <span style="margin-right: 10px">{{ item.employeeName }}</span
                ><van-tag color="#36c2a8">{{ item.relationship }}</van-tag>
              </div>
              <div class="item_info">
                <span>手机号</span><span>{{ item.contactInfo }}</span>
              </div>
              <div class="item_info">
                <span>身份证号</span><span>{{ item.idCard }}</span>
              </div>
            </div>
          </div>
          <div
            style="
              display: flex;
              font-size: 16px;
              justify-content: space-around;
              margin-top: 20px;
              font-weight: 600;
            "
          >
            <div style="color: #36c2a8" @click="onEdit(item)">编辑</div>
            <div style="color: #ff0000" @click="onDelete(item)">删除</div>
          </div>
        </div>
      </div>
      <div v-else><van-empty image="search" description="暂无常用出行人,请新增" /></div>
    </div>
    <div style="margin: 20px; display: flex; flex-direction: column; justify-content: space-around">
      <van-button plain block color="rgb(82, 155, 46)" @click="onConfirm"> 确认出行人 </van-button>
      <van-button
        v-if="list.length < 3"
        block
        color="#36c2a8"
        @click="onAdd"
        style="margin-top: 20px"
      >
        新增出行人
      </van-button>
    </div>
  </div>
</template>

<script>
import { Dialog, Toast } from "vant"
import {
  queryConvalesceEntourageList,
  deleteConvalesceEntourage
} from "@/api/realAssets/icsharedstation/LYDJ/index.js"
import { getpersonalInformation } from "../../common/RYXX"

export default {
  name: "i_life_lydj_CYCXRusually",
  data() {
    return {
      title: "常用出行人",
      formData: JSON.parse(localStorage.getItem("LYDJform")),
      list: []
    }
  },
  methods: {
    onAdd() {
      this.$router.push({
        name: "rvicsharedstation-LYDJ_CYCXR",
        query: {
          CYCXR: encodeURIComponent(JSON.stringify({}))
        }
      })
    },
    onEdit(item) {
      this.$router.push({
        name: "rvicsharedstation-LYDJ_CYCXR",
        query: {
          CYCXR: encodeURIComponent(JSON.stringify(item))
        }
      })
    },
    onDelete(item) {
      Dialog.confirm({
        title: "删除",
        message: "确定删除该出行人吗？"
      })
        .then(() => {
          deleteConvalesceEntourage({
            id: item.id
          }).then((res) => {
            if (res.resultMessage === "SUCCESS") {
              Toast("删除成功")
              list.value = list.value.filter((i) => i.id !== item.id)
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    },
    onSelect(item) {
      item.select = !item.select
    },
    onClickLeft() {
      this.$router.push({
        name: "rvicsharedstation-LYDJ_submitForm"
      })
    },
    onConfirm() {
      let personData = ""
      const selectedItems = this.list.filter((item) => item.select)
      this.list.forEach((item) => {
        if (item.select) {
          personData += item.employeeName + ","
        }
      })
      if (selectedItems.length === 0) {
        Toast.fail("请选择出行人")
        return
      }
      personData = personData.slice(0, -1)
      this.formData.person = personData
      localStorage.setItem("LYDJform", JSON.stringify(this.formData))
      localStorage.setItem("LYDJcxr", JSON.stringify(selectedItems))
      this.$router.push({
        name: "rvicsharedstation-LYDJ_submitForm"
      })
    }
  },
  mounted() {
    const selectedItems = this.formData.person ? this.formData.person.split(",") : []
    queryConvalesceEntourageList({
      userId: JSON.parse(getpersonalInformation()).userId
    }).then((res) => {
      if (res.resultMessage === "SUCCESS") {
        this.list = res.data.map((item) => {
          item.select = selectedItems.includes(item.employeeName)
          return item
        })
      }
    })
  }
}
</script>

<style lang="less" scoped>
.content {
  background-color: #f8fbff;
  min-height: 75vh;
}
.item {
  width: 85%;
  margin: 20px auto;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
  background-color: #fff;
  margin-bottom: 10px;
  font-size: 14px;
  border: 1px solid #f8fbff;
  .item_info {
    display: flex;
    justify-content: space-between;
    margin: 5px 0px;
  }
}
.selected {
  border: 1px solid #36c2a8;
}
</style>
